<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="车辆型号" prop="modelName">
                <el-input
                    v-model="queryParams.modelName"
                    placeholder="请输入车辆型号名称"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['system:model:add']"
                >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['backstage:vehicleModel:edit']"
                >修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['backstage:vehicleModel:remove']"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['backstage:vehicleModel:export']"
                >导出
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="modelList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="编号" align="center" prop="id"/>
            <el-table-column label="车辆型号名称" align="center" prop="modelName"/>
            <el-table-column label="车辆宽度（座）" align="center" prop="axisX"/>
            <el-table-column label="车辆长度（座）" align="center" prop="axisY"/>
            <el-table-column label="创建时间" align="center" prop="createDate" width="160">
            </el-table-column>
            <el-table-column label="创建者" align="center" prop="createUserName"/>
            <el-table-column label="更新时间" align="center" prop="updateDate" width="160">
            </el-table-column>
            <el-table-column label="更新者" align="center" prop="updateUserName"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:model:edit']"
                    >修改
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['system:model:remove']"
                    >删除
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleInfo(scope.row)"
                        v-hasPermi="['system:model:edit']"
                    >详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--车辆型号弹框-->
        <el-dialog :visible.sync="isShowAdd" :title="modelTitle">
            <vehicel-model-add-or-update
                v-if="isShowAdd" @onClose="closeAdd()" @onConfirm="onConfirm" :formData="modelData">
            </vehicel-model-add-or-update>
        </el-dialog>
        <!--车辆型号详情-->
        <el-dialog :visible.sync="isShowInfo" :title="infoTitle">
            <vehicle-info v-if="isShowInfo" :form-data="infoData" @close="infoClose">
            </vehicle-info>
        </el-dialog>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
    import {listModel, getModel, delModel, addModel, updateModel, exportModel} from "@/api/backstage/vehicleModel";

    import VehicelModelAddOrUpdate from "./vehicelModelAddOrUpdate ";
    import VehicleInfo from "./vehicleInfo";

    export default {
        name: "VehicleModel",
        components: {
            VehicleInfo,
            VehicelModelAddOrUpdate,
        },
        data() {
            return {
                infoData:{},
                infoTitle: "详情",
                isShowInfo: false,
                modelTitle: "",
                modelData: {},
                isShowAdd: false,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 【车辆型号】表格数据
                modelList: [],
                //【车辆型号】编号
                modelId: '',
                // 弹出层标题
                title: "",
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    modelName: null,
                },
            };
        },
        created() {
            this.getList();
        },
        methods: {
            infoClose(){
                this.isShowInfo = false;
            },
            handleInfo(val){
                this.infoData = val
                this.isShowInfo = true;
            },
            updateModel(val) {
                let data = {
                    id: val.id,
                    modelName: val.modelName,
                    axisX: val.axisX,
                    axisY: val.axisY,
                    updateDate: new Date().getTime()
                }
                updateModel(data).then(resp => {
                    this.msgSuccess(resp.msg);
                    this.getList();
                })
            },
            closeAdd() {
                this.isShowAdd = false;
            },
            addModel(val) {
                let data = {
                    modelName: val.modelName,
                    axisX: val.axisX,
                    axisY: val.axisY,
                    createDate: new Date().getTime()
                }
                addModel(data).then(resp => {
                    this.msgSuccess(resp.msg);
                    this.getList();
                });
            },
            onConfirm(val) {
                if (val.id === undefined) {
                    this.addModel(val);
                } else {
                    this.updateModel(val);
                }
                this.closeAdd();
            },
            handleUpdate(val) {
                this.modelTitle = "修改车辆型号"
                this.modelData = val;
                this.isShowAdd = true;
            },
            /** 查询【车辆型号】列表 */
            getList() {
                this.loading = true;
                listModel(this.queryParams).then(response => {
                    this.modelList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.modelData = {};
                this.modelTitle = "新增车辆型号";
                this.isShowAdd = true;
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$confirm('是否确认删除【车辆型号】编号为"' + ids + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delModel(ids);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                })
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确认导出所有【车辆型号】数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return exportModel(queryParams);
                }).then(response => {
                    this.download(response.msg);
                })
            }
        }
    };
</script>
